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معلومات يجب قراءقا 


OO TT TE E E 
و ا ا ا ا ع ف د‎ 
وذلك من وجه نظرنا لأهميته فليس كل شيء نستطيع ان نعربه فهذا الأمر يجعل‎ 
و ی ن ا لے ی ا سک که‎ 
عالمية وليس من باب العبث أو تعلم الانجليزية لكن قليلا من هذا وقليلا من ذاك لكي‎ 
تكون معلوماته مكتملة فيقرأ معلومة تخص ما تعلمه ويكون مذكور بها المعلومة‎ 
ولكن بالمصطلحات الانجليزية فيجلس ولا يفهم منها شيء وهذه خسارة للمتدرب‎ 
فالتعریب بقدر ما هو مهم بقدر ما قد یشوه معلومات المتدرب اذا زاد عن حده فمثل‎ 
ما يوجد كلمات عربية تفقد معناها اذا ترجمت للاأنجليزية فكذلك الحال بالنسبة للغة‎ 
لطر خرن عل ان ۷ تتاف رف الات خرصا على ان فف اکر‎ 
قار مك ن المصطاتات اا اى اة ار ن م قر اها الف اة‎ 

بحيثٽ ان تفهمها جيدا وتعرف ماذا نقصد بها . 


ومن هنا نبداً الطيعة الاولی من هده السلسلة وخصصناها لل ( عار†S Cascading‏ 
والمواضيع الحيوية في تطوير وتصميم مواقع الانترنت . 


ولقد حرصنا على ان ندخل بالموضوع مباشرة والشرح مباشرة وذلك لأننا نعلم ان 
غير ذلك قد يسبب الملل والضيق للمتدرب فكتير من الكتب تطيل بالحديث وتلف 
وتدور بالموضوع حتى توصل لك المعلومة وأعتقد ان هذا شيء ممل فالكتاب ليس 
بعدد صفحاته بل بمعلوماته فأنا اضع بين يديك كتاب يتكون من ٠١‏ صفحة فقط لا 
غير وهي كافية بإذن الله ان تجعلك قادرا على فهم کل ما یتعلق بال ( مارا؟ ) . 


وفي النهاية اقول لك اخي المتدرب لقد شرحت محتويات هذا الكتاب بأدق تفاصيلها 
وشرح كل مثال بالتفصيل الممل لكي يناسب جميع المستويات ووضع هذا الكتاب 
للعارفين بلغة ال ا11۷ ولو معرفة قليلة أما من لا يعرفون بال H۲١1‏ 
فيستطيعون ان يركزوا فقط دراستهم على ال عار ليفهموها جيدا لكي إذا واجههم 
کود م1ر)؟ يستطیعون ان يترجمونه ويعرفون ماذا يعني فمثلا إذا وجد شخص يريد 
ان يغير في ملف ال مرك الموجود في بعض المنتديات مع عدم معرفته المسبقة 
بال ا1۷[ على الاقل من خلال دراسته لهذا الكتاب يستطيع ان يفهم هذا الملف 
کا ر اا عورف اة لخا و ك ن 
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فنرجوا من أي شخص يقرأ هذا الكتاب ويجد به أي خطأ أن يرسل رقم الصفحة و 
موقع الخطاً بها على الايميل الذي سوف اذکرهہ تحت هذه الفقرة فأخي المتدرب كما 
حرصنا على مدك بالمعلومات وعلى نيل ما تشاء من تعلم وسهرنا الليالي لإعداد ذلك 
فأحرص على ان تجعلنا في افضل صورة فمعلومة صغيرة منك إذا حصل خطاً قد 
يجنبنا النقد عليها, ٠‏ 

samialr@hotmail.com 


واخر ما اذكره هنا هو ان هذا الكتاب مجاني وليس مخصصا للبيع فيكفي منك دعاءا 
لنا بالتوفيق والقدرة على عمل المزيد من هذه الكتب الموجهة الى الشاب العربي 
ليفرغ طاقته بما به الخير لوطنه وأمته . 


ويؤسفني ان اقول أرجو من الاخوة عدم سرقة هذا الكتاب ونسبه لأي شخص اخر 
فللأسف هذه الظاهرة بدت منتشرة وهذا ما جعلنا نتردد في طرح هذا الكتاب ولكننا 
طبعناه ككتابا عاديا وليس الكترونيا في بعض مكتبات المملكة الاردنية الهاشمية 
وحصلانا بحمد الله على حقوق طبع لديه موثقفة لدينا وأي مساس بحقوقنا أو نسب 
الكتاب لنا أو وجوده بأي موقع بغير ذكر حقوقه لنا قد يعرض الفاعل للمسائلة 
الفلو نة وى مو ههن خلال مر اة الشركة المت فة بار سكا ها الرقانن آل 
حصلنا عليها التي تعطينا حقوق الملكية الفكرية لهذا الكتاب ونحن نأسف على ذكر 
ذلك لكن ما يراه الانسان على شبكة الانترنت يجعلنا نأخذ احتياطاتنا كاملة قبل وضع 


إعداد ۽ 
سامي محمود أسعد الربايعة 


بمساعدة كلامن : 
ثامر محمد محي الدين و محمود حسین محمد 


جامعة العلوم التطبيقية - المملكة الأردنية الهاشمية 
تلفون : 0٩۹1۲۷۹59٦1۱٦۳٦٦‏ ۰ 


By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 3 
© 2003 - 24 


Cascading Style Sheets With HTML And Any Languages 
4M 085 


د هناك طریقتان یکتب بهما ال م[ر)»ء وهما : 
ف ی او ا ی ا ا 
مثال : 
<م/> الجملة التي ترید <'۔۔۔-هنایكتب كود ال--م[ر)ء۔----'"=م1ر)؟ > 


: مثال‎ 
<head> 
<style type ="text/css'"'> 


هنا يوضع اكواد (الخصائص) ال ماراء - 


</style> 
<head> 


ان يكتب في ملف مستقل بصيغة وو ويتم استدعائه من رأس الصفحة 
المصممة من خلال وسم يكتب بالصيغة التالية : 


<link rel ="stylesheet" type="text / css" href = املف‎ مسا.css'""‎ /> 


وتكتب هذه الصيغة في رأس الصفحة المصممة اي بين وسمي <head>------‏ 
</head>‏ 


لفح ف ك ةاعر زاضحن انربك مر ي فيا كرا فق ار ةة 
O‏ فقط المطلوب هو 
راا 


لنبداً بالصيغة الاولى وهي كتابة ال ٥1ر)ء‏ في جسم الصفحة وليس في رأسها : 


يكتب ال ٥[ر†ء‏ في داخل اي وسم من وسوم ال 11ط المعروفة ويكون تأثير ذلك 
ال ءإراء فقط على الجملة او الحدث المحصور بين الوسمين الذين كتب ال مارك 
في داخل وسم البداية . 
ا و 

>p تقنية الانترنت <'۔۔۔-''=ع[ر)ء‎ </p> 
.. لنحلل هذا المثال سويا‎ 
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اول شيء كتب وسم ال )ط1 وهو (م) الخاص بالجمل ثم ال ]راء ثم كتبنا بجانبه 
غ۵ سار ی نے خط ا ما اکل ال 8اه شارت اس کے اغفا لر 


داخل اي وسم من وسوم ال htm]‏ . 
--۔۔--۔-------هنا تكتب الخصائص المراد اظهارها --------------""' = Style‏ 


امثلة اخرى توضيحية سريعة ... 


<h1 style = "-------------- "< <1ط/> برمجة الانترنت‎ 
<tt style = "-------------- "< <اا/> الانثرئت‎ 
<img sre ="cpu.gif" style = "------------ "'/< 


الان سوف يتبادر الى اذهاننا ماذا يجب ان نكتب بداخل هذا ال ٥1ر†ء‏ اي مكان ا 
ساو ا فا و فت تعر ق ر 


سوف اقسم التأثيرات الى اقسام ليسهل على القارىء فهمها وحفظ صيغها 


الخط t٤ره؟‏ :- 
" 17eك-٤nه]‏ : وتستخدم اتحديد حجم الخط وهنا يوجد وحدتي قياس وهما ٠ع‏ 
اي هي وحدة قياس الخط في اکثر من البرامج المستخدمه متل ال w0۲4‏ و 
٥6عم†nهr‏ فهي بذلك تجعل المصمم يستطيع ان يقدر الحجم المستخدم 
الأى انهه لانة مخطة في اكير امج الكتانة التي ادما 
وصیغتھا :- ( :٥2وره‏ ) وتکتب ... 


<م/> الخط العربي < " ئم10 : <p style=" font-size‏ 
النتيجة : الخط العربي 


" لانصو؟-٤«م]‏ : وتستخدم اتحديد نوع الخط 
وصیغتها :- ( : رانس وگ-٤«ه]‏ ) وتكتب ... 


<مٍ/< الخط الاتدلسي > "' <p style = " font-family : Andalus‏ 
النتيجة : الخط الأفدلسي 


font-weight "‏ : وتستخدم لتعریض الخط 
وصیغتھا :- ( : font-weight‏ ) وتکتب... 
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<م/> خط عريض > "' <p style = " font-weight : bold‏ 
النتيجة : خط عريض 
ملاحظة : دائما تستخدم 014ط الى جlنب font-weight‏ 


ويوجد بعض الصيغ التي سوف تذكر عند حينها وذلك لكي لا نشق على المتدرب . 
في النهاية نستطيع ان نجمع جميع الصيغ في صيغة واحدة اي ان تأخذ الكلمة جميع 
الصفات التي ذكرناها فيما سبق اي حجم الخط ونوعه وتعريضه . 

فتصبح الصيغة :- 


<p style = " font-size = 20pt ; font-family = Arial ; font-weight=bold 
" < <م/> تصميم صفحات الانترنت‎ 


النتيجة : تصميم صفحات الانترنت 
ملاحظة : وضعنا بينهم ( ; ) وهذه الاشارةتعني ( و ). 


لنضع مثال كامل ونرى ما تحليلك له ... 


<html> 
<head> 
>ti)[]ع< تصميم الخط‎ >/)it[e< 
</head> 
<body> 


<م/> هذا خط عادي لا يوجد عليه اي تطبيق او تأثير <م> 
<م/> هذا الخط يوجد عليه تأثير حجم الخط < " )ض20 : <p style = " font-size‏ 


هذا الخط يوجد عليه تأثير < <p style = " font-size : 20pt ; color : #0000ff"'‏ 
<م/> حجم الخط ولونه الازرق 


</body> 


</html> 
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Kr mel E plerer‏ سى اط ا 
Fe Eli iar Parade feb liek‏ 


َ ای‎ ' Smarr f rat f rih fF: ا‎ i 


اھا اکا س + 


TH | FF Waaa aA Riri (ETT CHIE | Fim 


ہا سل شاد ٣آ‏ ہرک لی اپ تیت ار تالی 


غا الخط پرجد عليه تأثير حم الط 


شا ادا پو جذ عليه ابر عجم الط ولونه الازرف 


| i RF 


ا او ت ق ی ی ا 
نضعها بصيغة ١٥[ه١ء-)١٥]‏ فهذه الكلمة الوحيدة التي تكتب بمفردها فلا تقلق فقط 
اغرفها فلا يرج غير ها برها اة غن القاعدة ( فلكل ق عة را زل فخت لا 


يوجد شواذ كثيرة بل عدد قليل جدا . 


-: الشكل الثاني لكتابة ال ماري‎ ٠ 
: ويكتب بالصيغة التالية‎ 


<head> 


<style type = " text / css " > 


نكتب هنا التأثيرات التي نريد ان نجريها على وسوم معينة تحصر جملة معينة ت 
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لنحلل ذلك سويا لاحظ انه يجب كتابة التأثيرات بين وسمي م [راء وهما :- 
وسم البداية وهو : 
<style type = " text / css " >‏ 
ووسم النهاية وهو : 
</style>‏ 


قد يدور في ذهنك كيف وماذا يمكن ان اكتب بين هذين الوسمين اي في جسم ال 
اء اذا لنرى ماذا يمكن ان نكتب بداخله وما هي الصيغة لهذه الكتابة .. 


اولا یجب ان تحدد اسم الوسم الذي تريد ومن ثم تصنع له التأثير الذي تريد ان يقع 
عليه ليكن هذا الوسم مثلا م او 11 او اي شيء . لنفرض نحن الوسم م ا 
فيكتب كالتالي : 
P { font-size : 14pt }‏ 
فهنا بعد وضع هذه الصيغة بين وسمي ال ٥ء‏ ووضعه في اي رأس صفحة سوف 
يقع التأثير على اي جملة او حدث يوضع بين وسمي ال P‏ اي ان الصفحة سوف 
تربطه مباشرة بما كتب في رأس الصفحة فمثلا... 
<head>‏ 
<style type = " text / css " >‏ 


p { font-size : 14pt } 
</style> 
</head> 
<body> 


<م/> تقنيات الانترنت <م> 
</body>‏ 


في هذا المثال سوف تظهر لنا كلمة تقنيات بحجم خط ٤‏ فأي شيء سوف نکتبه في 
تصميمنا في الصفحة بين وسمي ال <م> سوف يأخذ هذه الخاصية وهي حجم الخط. 


اذا الصيغة العامة للكتابة بين وسمي ال ماري هي :- 
صيغة التائير(كتابة الخصائص) ١‏ اسم الوسم 
امثلة سريعة :- 
h1 {font-family : arial, impact ; color : #ff0000 }‏ 
اذا اي جملة سوف تكون بين وسمي <1ط/>-----<11> سوف يكون لونها احمر 
ونوع الخط اهنج او اعهمص] . لقد قلنا سابقا ان ( ; ) تعني ( و ) وأضف هذه 
المعلومة ايضا ان ( , ) تعني ( او ) فاذا لم يوجد الأول فطبق الثاني . 
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em {font-size : 10pt ; font-weight : bold }‏ 
اذا اي جملة سوف تكتب بين وسمي </em>‏ -------- <۳> سوف یکون حجم 


خطها ۱١‏ و خطها عريض . 


والان لنجمع جميع الصيغ ونضعها في جسم ال عإرأك.... 


<style type = " text / css " > 
Pp { font-size : 14pt } 
h1 {font-family : arial, impact ; color : #ff0000 } 


Em { font-size : 10pt ; font-weight : bold } 


</style> 
لنأخذ مثالا كاملا ونرى ماذا سوف يطرأ على الصفحة المصممة...‎ 
... ولنتعرف على وسوم جديدة و صيغها داخل ال مارك‎ 
<html> 
<head> 


>/)it[<‏ تطبيق التصميم <ع]))> 

<style type = " text / css " > 
sup { position :relative ; top : -1ex } 
sub { position :relative ; bottom : -1ex} 

</style> 

</head> 
<body> 
<صم>جملة سوف تظهر من غير اي تاثير <م/>‎ 


<p> internet <sup> Arab world </sup> </p> 
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<p> network <sub> IT </sub> </p> 
</body> 


</html> 


ree ner mt ep ra‏ » بط القمم ف 


Fe Elk iar Paral Tak lirk 
| ا ت‎ 1 َ i march ly wat O rih f: 7 - 


zl FI] Da arerda 4 RAT ETE pg rea mI 


چالا دوه شیر ن خی ال تایز 
ا ا 


reme 


aH 
Ir 


لنضع تعليقاتنا على هذا المثال والمعلومات الجديدة التي وضعنها ... 

position : relative jJ و (ubء هما وسمي ”1ط ولا جديد في ذلك‎ sup 
و اطعا و ص0ااەط و صم اما ماذا نقصد‎ 1ft : وتأخذ بعدها القيم التالية‎ 
بسالب واحد بوحدة جم فهو مقدار الازاحة التي تفصل الجملة المحصورة بين‎ 
وسمي ال <مإuء> او <طںء> عن الجملة التي كتبت قبلها ولنأخذ امثلة سريعه‎ 


-: توضیحیه‎ 
sup { position : relative ; top : -2ex} 
<p> internet <sup>Arab world</sup> </p> 
-: النتيجة‎ 
س المسافة ۔۲‎ Arab world 


internet 


sup { position : relative ; top : -3ex} 


By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 10 
© 2003 - 24 


Cascading Style Sheets With HTML And Any Languages 
2003/02/05 


<p> internet <sup>Arab world</sup> </p> 
-: النتيجة‎ 
Arab world 
internet 


وما ينطبق على هذا ينطبق على الكل لكن الامر الطبيعي ان نضع (1-) وهو القياس 


sup { position : relative ; top : -1ex} 


<p> internet <sup>Arab world</sup> </p> 


-: النتيجة‎ 
Arab world 
internet 
sub { position : relative ; bottom : -1ex } 
<p> internet <sub>Arab world</sub> </p> 
النتيجة ت‎ 
internet 
Arab world 


اذا الصيغة العامة الخاصة ب وسمي ماو طل؟ ... 

× مقدار الازاحة : إتجاo‏ الإزاحة ; Position : relative‏ 
ملاحظة ١‏ 
يمكن استخدام الصيغة السابقة باوسمة اخرى غير هذين الوسمين حسب الحاجة ..كما 
انه لاخظتا ان ٠‏ يعطى از لحة اقل هن دا , وكذلك ۴طى از احة اکر من ١‏ 
اا كلها واد الغده مانت رامت آل احة وتكن .ذا اتيت ذل من الات 
موخت ای ۴١‏ بڈل من ےا فر تا تحصل غل عة مک الفا ھم آے لی کت 
مه تصبح 0٥0)هط‏ ... ولنكون اكثر دقة فرقم ٠+‏ بدل من ١‏ سوف يؤدي الى 
الإزاكة فك الالخاه مقار واحد... 


-: مثالا سریعا‎ 
sup { position : relative ; top : +2ex } 


<p> internet <sup>Arab world</sup> </p> 
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- النتيجة‎ 
Internet Arab world 


الصيغة التي ذكرتها الا وهي السالب . 


بما اننا تعرفنا على صيغة ال ماما٥۲‏ : «ti0زومم‏ لكي تكون معلوماتنا كاملة 
لنتعرف على الصيغة الثانية لها لنكون اكملنا الحديث عنها وانهيناها نهائيا..ولا تقلق 
لا يوجد غير صیغتین وهما :- 

position : absolut sy position : relative 


اذا لنتعرف على الصيغة الثانية وهي عاuآموطه‏ : «ه0ازومم والاستخدام الشائع لها 
هو تأثيرها على الصور وطبعا كما قلت سابقا تستطيع ان تغير بالكود ولكل منا 
استخداماته اي نحن هنا نوضح وانت عليك الابداع ومن فهم لن يعجز .. 


وتكتب بداخل ال م1ر†ء بهذه الصورة .. 


<img sre= "pic.gif" style= " position : absolute ; top : Opx ; left : Opx 
; z-index: 1"> 
-: وألنحلل هذه الصيغة‎ 
اول شيء كتبنا ماںآموطه : ١10ازومم ونعني بها موقع الصورة اي اين سوف‎ 
ID تکون وکیف ونحدده بالاتجاهات الت سوف تأتي بعده ثم کتبنا الاتجاهات‎ 
ومقدارها من مساحة الصفحة (الشاشة) فكلمة م٥ نعني بها ضع الصورة في اعلى‎ 
الصفحة بمقدار يفصل الصورة ( ۰ بکسل) عن حافة الصفحة من الاعلى وثم قلنا له‎ 
بكسل عن حافة‎ ٠ اي بعد ان تضعها بالاعلى ضعها جهة اليسار بمقدار‎ ا٤)‎ 
. الصفحة من اليسار‎ 
وكأننا نقول ضع الصورة في الاعلى الى اليسار ... ثم كتبنا ]1 : z-×عل1] وهذه‎ 
الصيغة مهمة جدا فهي تسمح بتعدد الات فا ك اي لو وضعنا اکٽر من‎ 
الصورة‎ style الخاص بها فلو وضعناب‎ style ال‎ ™ 
نعني بها الطبقة الاولى ولو وضعنا في ]راء الصورة الاخرى‎ 1d e×-7 : 
. ل11 نعني بها الطبقة الثانية اي انها سوف تاتي فوق الصورة الاولى‎ ×-7 : 


يمكن ان تقول ما فائدة ذلك انا اقول لك فرضنا اننا نريد ان نضع صورة ونضع فوقها 
جملة معية بحيث تظهر الصورة في الطبقة السفلى وتظهر الجملة في الطبقة العليا 
فیکتب ال 1 : 1٥×7‏ للصورة التي نريد ان نضعها في الاسفل اما النلص نضع له 
2 : 7-×۵ 1,1 ...لنأخذ مثالا ونری ما تفسیر ما ذکرناه سابقا , 
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<img sre = " pic-gif " style = " position : absolute ; top : 2px ; right : 
3px ; index-z: 1> 


<p style = " position : absolute ; top : 2px ; right : 3px ; index-Z: 2 > 
pc-computer </p> 


لنحلل هذا المثال بشكل سريع :- 

ازل کے اح س مھ رب ارد اى ل اس ا ان رر كت ارلا سف 
تكون الطبقة الاولى والجملة تكون الطبقة التانية . هنا يهمنا فقط ال : z-×ع‏ ,1 
الذي سوف يحدد الطبقة وليس الترتيب :١‏ z-×ع‏ ,]1 يعني الطبقة الاولى :2-×ع ل11 
يعني الطبقة الثانية اي انها سوف تاتي فوق الصورة فلو وجد ٥×-7:۳‏ 110 لوضع 
فوق الجملة او النص . 


مثالا كاملا على ما سبق :- 


<html > 
<head> 
>ti)[]م<تاقبطلا>/)it1ع<‎ 
</head> 
<body> 


<p> < img sre ="LOG1.gif" style =" position: absolute ; top: Opx; 
left: Opx; z-index: 1" alt = "first positioned image" > </p> 


<p style = "position : absolute; top: 60px; left: 15px; 
z-index: 3; font-size: 20pt; " ><b> Positioned Text </b></p> 


<p> <img sre = "LOG2.gif" style = " position: absolute; top: Opx; 
left: Opx; z-index: 2" alt = "second positioned image '" /> </p> 


</body> 
</html> 
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i اغات‎ . rra ee rm Ti CTT 
Fara frek Hek 


أ Seach ly ram f rih f ٣ MH r‏ ' آي 8 ا 


1 | FÎ Fares 4r Beira E TERE plgrphee ikye-AirI Im ma 


al E NTE 


اذا position : relative‏ تستخدم للازاحة أما ماںاموطھ : «ti0وەم‏ فتستخدم 
لتحديد الموقع و تحديد الطبقات والإثنان يأخذان القيم ( pهt right — [ft‏ - 
bottom‏ ( . 

وفي ال مع{اںاموطه : «ti0زومم‏ نستخدم : z-×ع‏ لم1 وذلك لتحديد الطبقة. )١(‏ 
تعني الطبقة الاولى من الاسفل و (۲) تعني الطبقة التي سوف تاتي فوق طبقة )١(‏ 
و(۳) تعني الطبقة التي سوف تأتي فوق الطبقة (۲) اي ان الترقيم يبدأ من الطبقة 
السفلى ثم تأتي الطبقات التي فوقها والتي تغطي ما قبلها بحسب زيادة العدد . 


لنأخذ خواص لل 0«”٠٠١ء)ء‏ هط اي خلفية الموقع التي يمكن ان توضع في جسم 
ال راء وسوف اضع لكل صيغة قيمة افتراضية ثم نناقش القيم التي يمكن ان 
توضع :- 

background-color : #e6e(bd "‏ 
وتستخدم لتحديد لون خلفية الموقع . 


background-image : url(logo.gif) "‏ 
وتستخدم لجعل خلفية الموقع صورة ولاحظ ان اسم الصورة كتب بين قوسين وسبقه 
عبارة ۲1ں ونقصد بها امتداد موقع الصورة فلو كانت في نفس الملف الذي يحتوي 
عليه عء[رء فنكتفي بكتابة اسم الصورة اما لو كانت غير ذلك فتكتب بهذا الشكل 
url(pc/1ogo. gif)‏ اي ان الصورة في ملف اسمه pc‏ وهذا الملف موجود داخل 
الملف الذي يحتوي على ملف ال م]اراء او تكتب (گ1ع. ٥ع‏ ٠!/ءم/..)1إں‏ فذلك يعني 
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ان الصورة موجودة في ملف اسمه عم وان ال ٥1راء‏ موجود في ملف اخر اي انهما 
ليسا في نفس الملف اعتقد ان هذه الامور معروفة لدى المتدرب اذا مارس ال ]باط 


background-position : bottom " 

وتستخدم لتحديد موقع الصورة في الخلفية لا تتعجب من ذلك فلو افترضنا ان 
اور کر ی ا ات بے ا رک خو ةل رر ا حه 
GS‏ فهنا 
نستطيع ان نضعها كخلفية ثابته للموقع في اي مكان في الصفحة فما ان يفتح الزائر 
اي صفحة في الموقع سوف تظهر درو ن ا 
ان تستخدم اتجاهين في نفس الوقت اي ممكن ان تقول اريدها في الاعلى جهة اليمين 
ا موت کف ف ا 

); ( ولعلك تسائلت لماذا لم نكتب( و) اي‎ ball Ho O : : top right 
فنحن لم نكتبها لاننا كأننا نقول ضعها في اعلى اليمين هل في هذه الجملة( و) اذا لن‎ 
- left - center - bottom — top ) نكتب ( ; ) بينهم.. وتاخذ هذه الصيغة القيم‎ 
...( right 


background-repeat : no-repeat " 

رتخد في خىل العورة انى زركاه كفة ل تكرر :لك سال كف داف 
نقول لك افترض أنك وضعت صورة كخلفية لموقعك وكان حجم هذه الصورة بربع 
حجم صفحة موقعك فان هذه الصورة سوف تتكرر مباشرة الى ان تملا الصفحة 
كاملة اي انها سوف تتكرر اربع مرات (لانها بحجم ربع الصفحة ) ولكن لو افترضنا 
انك تريد الصورة كما هي دون ان تتكرر اي كأنك تريدها ان تظهر فقط بجانب من 
جوانب الصفحة او في منتصفها متلا فهنا يبرز دور 4مrep-0ہ‏ التي توضع في 
no-repeat‏ : repeat-sitionىم‏ اي كانك تقول لا اریدها ان تتکرر. اما اذا اردت 
ان تتكرر فتستطيع ان تكتب 1جء م٠۲‏ فقط اي ان صيغة ....... : position-repeat‏ 

تاخذ احد الشكلين دءمء لجعلها تتكرر او ا2ء م 0-۲٠‏ لجعلها لا تتكرر.. 


position-attachment : fixed "‏ 
وتستخدم في إعطاء صفة الحركة او التبات للخلفية فمتلا لو اردنا الخلفية ان تبقى في 
اسفل الصفحة حتى لو قام الشخص بتحريك الصفحة الى الاعلى والاسفل فيجب ان 
تبقى ظاهرة لزائر الموقع في الاسفل اي لو كانت نهاية الرؤية للمستخدم هي 
منتطفة الصفحة يجب ان تظهر له في نهاية رزيته للصفحة. اما حت لى تزل 
المستخدم بال 11هإمء الى اسفل الصفحة ليرى بقيتها سوف تتحرك الصورة مع 
حركة الزائر بحيث تبقى في الاسفل ..فلو اردنا تنفيذ ما ذكرناه سابقا فما علينا إلا ان 
نكتب بجانب : عص طattac-sitionىم‏ الكلمة ۴×4 .. اما لو لم نكتب هذه 
الصيغة فسوف تظهر الخلفية لو وضعت بالاسفل ف کی ا ا ب را 
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الزائر للصفحة إلا لو نزل بال 11هءء الى الاسفل الى ان يصل لنهاية الصفحة (اي 
الوضع العادي لوضع الخلفية دون اي تاأثير لل عإرء على الخلفية).. 


لنأخذ مثالا كاملا يجمع > جميع الصيغ التي ذكرت سبقا . 


<html> 
<head> 
>)i)[]م<ەتباث خلفية‎ عضو>/)i)1e<‎ 


<style type = "text/css'"'> 


body { background-image: url(logo.gif); 
background-position: center; 
background-repeat: no-repeat; 
background-attachment: fixed; } 


Pp { font-size: 18pt; 
color: #000000; 
text-indent: 1em; 
font-family: arial, sans-serif; } 


</style> 
</head> 


<body> 
<center><h1> windows xp </h1></center> 
<br><br> 
<p> 
في هذا المثال تطرفنا الى ان نجعل الصورة تبقى تظهر بالاسفل بحيث يبقى الزائر للموقع يراها‎ 
في اسفل الصفحة (حسب رؤيته) فهو يراها حتى لو لم ينزل بالصفحة الى الاسفل وكل ما نزل‎ 
بالصفحة الى الاسفل كل ما بقيت الصورة في الزاوية من الاسفل مهما نزل بالصفحة اي تبقى‎ 
وا بطي قازار بان الصو رة ادرت حن فن جا ازل ازل مه وان هذا غير‎ 
صحيح فهو الخداع البصري الذي استخدمه المصمم فهي تي تيقى ثابته فعندما نقول نريد الصورة‎ 
کے ال تمتا من ایسا کی ۶ ن مال تست بے اسای لدينا فهنا نحن نقصد‎ 
اسفل الصفحة بنسبة لرؤية الزائر لها فلو كانت الصفحة ممتدة الى الاسفل لطولها هذا لا يهمنا‎ 
فيجب ان تظهر له بأسفل اليسار للصفحة دون ان ينزل الزائر الى اسفل الصفحة ليرى ما تبقى‎ 
منها . .ولنتحدث في الكودالذي كتبناه فوق بشكل سريع لقد كتبنا كود وضع الصورة كخلفية‎ 
بحيث تكون في منتصف الصفحة ثم حددنا بكتابتنا الكود الذي يليه ان لا تتكرر هذه الصورة‎ 
حتى تملأ الصفحة اي اريد فقط صورة واحدة وطبعا حددت ذلك لان الصورة التي وضعتها يأتي‎ 
حجمها اقل من ربع حجم الصفحة وثم كتبت كود الثبات للصورة الذي تحدثنا عنه سابقا و طبعا‎ 
کل ما ذکرناه من صیغ تدل على الخصائص المرتبطه بالخلفية لذلك وضعناها ضمن وسم ال‎ 
ولط وبعد ذلك ذكرنا خصائص النص الذي سوف يظهر بالصفحة ... اخي المتدرب لا تقلق‎ 
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من كثرة المعلومات فلقد حرصنا ان نمدك بها بالتدريج بحيث لا تسبب لك الضيق وفي كل 
الاحوال فإن ال راء معلوماته وصيغه قليلة جدا مقارنة مع ال اط او اي لغة تصميم قد 
يتطرق لها اي مطور لمواقع الانترنت...( فال اط لوحدها لا تكفي في جعل موقعك يظهر 
بالشكل اللائق فال م1راء يجعلك تزينه وتضع له لمسات سحرية وجذابة)... 
</p>‏ 
<h1> MST </h1>‏ 


</body> 


</html> 


rr ea rer trp rra‏ ء وم ية اة ق 
Fe Elk ier fara Feb Iek‏ 


gf © E‏ م ا نے و کا اوا د 
aT fi | Î Di a anata are iE TERN pg lye E la Fen ev j =‏ 


windows Xp 


في هذا السثل تطرقدا الى ان نج الصو¡ تيقى تشي بالاسلل بعيت ييبلى ال لر وقي بر اها في افا الصانعة وب 
ورؤیتة) فہر پر اھا خی و لم بنرا باسشدة ٤‏ انق فن ما قبت الور ابي لز لرية دن 
يان احور ترك سعد فطل ما لزل شرف مع وکن هذا 
رای انه اندم تقول اراد اسو الى لمال السا من اليا 
الى الال لطرليا هذا 1آ يهنا ليجب ا ا ا ا ا 
تھا , وتنتحنٹ في الگود نڏ تيد اد لو : 1 , لصوو أ فة يعبت لكرن لي ملت الصفعة ثم 
دتا بتابتتا الكرد الذي بايد ن 1 فخ لص اي ریا فق ور راعدا روطلا حذذت نتف تان 
لصسرر ا الي وضستها داتي حجنا ن من رب قبت كود الشات للصو رة لذي نتا ده اقا و طعا كل ما 
وبع لف ڈ کر نا اتس نس رل دیا کر دا ن شي دا عي داتعي مر فطل بالخلفية تذ الف واا طمن وسم ا 
لذي سوت يلير بالصفعة ... لضي الستشرب ١‏ تف سن كر المطومات للف عر صدا آل سنك بها بالتار بح عبت لا تسب للد 
و اي لةه تيم فد بترن لها ي امقر علو ائه وهه فيلك جدا مقار نئا مع ال وااع ليق الي قل الحو ك للل ل 
پجعلل تز یلد رظح لد عار ارا ها :ا تظي في جمل عرقعك طهر باشل اتی آل ااا مطرر لعو قح الائئرلت...إ فال 
... المسبات عر بك وبهذاية 


8 LL 


ده تصميم ال ٥1رإء‏ للقوائم المرتبه ولغير المرتب4 order & unorder list)‏ ( :- 
نستخدم في تصميمنا لها نفس الصيغ التي ذكرت سابقا أما اي صيغة من الصيغ 
الاق فاا مترو كا لك فلك ما تصممة الكاص به كن الصة (الخاصع اة 
" ×م75 : ٤efا-gin Mar‏ ونقصد بها بعد كتابة القائمة عن حافة الصفحة من 
اليمين بحيث أن ببتعد النص عن هده الحافة بمقدار ٥‏ بکسل (وهذه اأوحدة 
المستكدمة ها تاد السار انط الشكل الال ١‏ 
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نفرض ان هذه حافة 


الصفحة من اليسار. 
o1- PC-PARTS‏ 


١‏ سي هذه هي ال 
Margin‏ 
Left‏ ... 
بمقدار 75 
على ما قبلها 


€$2- INTERNET 


اذا اfعا-ماعإهمم‏ نعني بها المسافة التي تفصل النص من 

کا اسز دنه لل رى تا لاه ادر ا ا ا اا دی 
ال فو لكر ا ا لاه ل ن مسل منود 
البكسل×م وحدة السنتمتر صه). 


ا ار فة ١‏ و ۷ افك ا آحة مار ۷8 عن ها فلها وه حاف 
الصفحة اليسرى اما القائمة التي رقمت ب ۾ و ط فقد اخذت ازاحة بمقدار ۷١‏ من 
ما قبلها اي القائمة المرقمة ١‏ و ۲ . اعتقد انك فهمت ماذا اقصد اي ان الازاحة تقدر 
من ما قبلها وليس دائما من حافة الصفحة ... كما انه يمكنك ان تكتب mar‏ في 

عدة صيغ من الاتجاهات اي s margin-bottom sy margin-top jn‏ 
margin- -right‏ وذلك حسب الاستخدام ولكننا في القوائم نستخدم اکثر الأوقات 
efا-margin‏ عندما تكون القوائم باللغة الانجليزية و أطع۲1-”1ع2۲م عندما تكون 
القوائم بالعربية . 


<html dir = "rtl "> 
<head> 
<title> القوائم‎ >/tit1e< 


<style type= text/css > 


ul { margin-right: 75px ; color : #ff0000 } 
ul ul { margin-right : 15px ; color : #0000ff } 
</style> 
</head> 


<body> 
<H1>ٽنرتالا‎ </H 1< 
<UL> 
>] مو اقع شر کاٹ‎ 
مواقع شخصية<[>‎ 
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<UL> 
>1< ترفیھیة‎ 
علمية<[1>‎ 
>1 اعلحيةح[‎ >/ [< 
UL> 
>1< مواقع إخبارية‎ 
>1< <[ا/>مواقع بريد‎ 
UL 


</body> 
</html> 
فل رة فل ان تفر الى الور ارک دكن المقاه الى ف رضن ها‎ 
کل یی عو اشد ر کے عت ان القن خض مت نالضوا الى کت كال‎ 
هنا کأنني اقول ارید ان ينفذ هذا التطبیق او‎ u1 u1 ) margin-right : 15px ‡ 
الكرد لذا جاعت قائمة بداظها قائمة أي يكي ان نتوذر هذا الشرط وإلا لن يطبق‎ 
الكود فلاحظت انني قلت مواقع شخصية وكانت ضمن القائمة الاولى تم فتحت له‎ 
هة لصف المر اتم الشخصدة الى كر فهةو عة و اة لاا ها جاع القرط‎ 
مطبقا اي قائمة داخل قائمة لذلك طبق الكود مباشرة لهذه القوائم اي ان تصنيف‎ 
بكسل من كلمة المواقع الشخصية وكلمة‎ ٠١ المواقع الشخصية جاء بمقدار ازاحة‎ 
بكسل من حافة الصفحة اليمنى‎ ۷١ المواقع الشخصية نفسها جاءت بمقدار ازاحة‎ 
لانها طبق عليها الكود الخاص بها اي قائمة واحدة فقط .. اضافة الى تطبيق الالوان‎ 
.. على كل واحدة‎ 


3 fla . LHeraufl Inkar rat E harî 
Farner Tekh Hak 


I aeerrh f rertrn A iat 2 5 :‏ ا 1 [#ا 


E Waar aA Rimi ETT ORI gar le RII‏ | لا 
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الوصلات التشعبية ( )1| ) وتطبيق ال ءاراء عليها :- 


a { color: #O0O000ff }‏ 
وهذه الصيغة سوف تؤدي الى ان اي وصلة تشعبية ]1١)(‏ ) سوف يصبح لونها 
ازرق. 


a: hover { color: #efb026 }‏ 
و هذه الصيغة تعني ان اي وصلة تشعبية بمجرد ان يلامسها الماوس سوف يظهر 
لونها ا ار اي 8 يتغير و من اللون الازرق الذي حددناه مسبقا 
التشعبية ترجع الو اة الى لونها اى خد ارات التشعبية ای اون | الازرق 


a: active { color: #ff0000 }‏ 
وهه الصيغة تعني ان اي وصلة تشعبية سوف تضغط عليها بالماوس ( کضغطه قبل 
الدخول ) سوف يصبح لونها الون الاحمر اي ان لونها سوف يتغير من اللون الازرق 
الذي حددناه للوصلات التشعبية الى اللون البرتقالي ثم الى اللون الاحمر الذي حددناه 
هنا .. 


a: visited { color: #ab1784 } "‏ 
وتعني هذه الصيغة ان اي وصلة تشعبية تم زيارتها سوف تصبح لونها اللون 
القرمدي (وكأننا نقول للزائر انك دخلت هذه الوصلة من قبل وذلك بتغير لونها 
ونتبيته. اي وای ن الازرق الذي حددناه مسبقا للوصلات التشعبية ليصبح 
اللون القرمدي( وتثبت هذه الوصلة فقط على هذا اللون اي الوصلة التي تم زيارتها). 


في النهاية اود ان اذکر تصمیم يمکن ان نطبقه على اي نص ولکنني ذکرته هنا لانه 
شائع الإستخدام في الوصلات التشعبية وهو وضع خط تحت الوصلة التشعبية وهو 
يکتب کتالي بداخل اي وسم من وسوم ال 1ط لکنني هنا سوف استخدمه داخل 
صيغة الوصلات التشعبية وهو : 
a { color: #0000ff ; text-decoration: underline }‏ 
اي ان اي وصلة تشعبية ضعها باللون الازرق و ضع تحتها خط اي يصبح شكلها 
کتالی :- 

٠‏ الحاسوب العربي 
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وهذه الخاصية يمكن ان تأتي على عدة اشكال وهم - 


. 5 


text-decoration: underline‏ : اذا کنت ترید وضع خط تحت الكلمة 
text-decoration: none‏ : اذا کنت ترید عدم وضع خط تحت الكلمة . 
text-decoration: overline‏ : اذا کنت ترید ان یظھر الخط فوق 
الكلمة . 

text-decoration: line-through‏ : اذا کنت ترید ان يظهر الخط في 
منصف الكلمة اي كأنك كتبت وسم 1ط وهو <)مناط> . 


وبما اننا ذكرنا تأثيرات ال )×ه) .لنذكر ايضا صيغة لم نذكرها من قبل وهي كتالي:- 
۳ : ع 1اه-ا×ه† وهذي تعني ضع النص بالاعلى ويمكن ان تأخذ القيم التالية بدلا 
منù center — bottom — right — left ) top‏ (... 


لنأخذ مثالا كاملا على ما ذكرناه... 


<html> 
<head< >1< تاثيرات على الوصلات التشعبية‎ >/اذ٤1م<‎ 


<style type = " text/css "> 


a {color: #0000ff ; text-decoration: none } 

a: hover { color: #efb026 ; text-decoration: 
underline } 

a: active { color: #ff0000 } 

a: visited { color: #ab1784} 

p {color: #ff0000 ; font-weight: bold} 


</style> 
</head> 
<body> 
<م/> وصلات تشعبية لمواقع اخبارية<م>‎ 


<a href=" http://www.cnn.com " alt= "NEWS"> CNN 
NEWS </a> 


<a href=" http://www.bbc.com " alt= "NEWS'"'> BBC 
NEWS </a> 


<br> 


<a href=" http://www.alj azera.com " alt= "NEWS'"'> 
ALJAZERA NEWS </a> 
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</body> 
</html> 


اعتقد ان هذا المثال لا يحتاج لتحليل .. 


ree er at Lepr‏ . ماقہر ات لے السلا القشفب ا 
Fara Fk liek‏ 


Search f Frwartrn Î iad 2 ۳‏ 1 ی ۴ 8 [#ا 


4 | E Waran aA Riri ETT ORI parE lel 


وسات لسعيية لمشي اغبارية 


AY ME E 


EEC MEWE 


RLTRELA FHT 


Dj iir fam i iî Hg E 


ولكن بعد ما تم شرح كل ما سبق ألم يخطر ببالك سؤال مهم وهو انك تصمم ال 
٥ء‏ لوسم معين متلا لنفرض لوسم ال م فهذا يعني ان کل ما ذکر وسم م ویوجد 
بداخله نص او اي شيء سوف يأخذ الصفات التي صممتها له في ال ماراء لكن 
لنفرض انك تريد مثلا ان تجعل اي نص كتب بداخل وسم ال م لا يأخذ هذه الصفات 
اي الصفات التي اخذتها جميع النصوص التي كانت في الصفحة المصممة كأن تريد 
ان تمیز هذا النص بالذات فقط عن بقية النصوص التي وضعت بنفس ذلك الوسم اي 
كأنك تقول اريد لهذا النص بالذات ان يختلف عن بقية النصوص التي تكتب بين نفس 
الوسم فما العمل بمثل هذه المشكله ؟ لنرى ما هو الحل .. 


هنا تبرز مرونة ال وأععطء ءإراء فتستطيع ان تصمم صيغة خاصة بك ليست 
مرتبط بأي وسم فكل ما عليك اذا اردت ان تجري ذلك التطبيق على اي وسم من 
وسوم ال 1.]ط ان تستدعي اسمه داخل وسم ال مط كيف ذلك لنری کیف یصمم 
وکیف یستدعی .. 
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.my-style { color: #ff0000 ; font-weight: bold }‏ 
ا ڪڪ ي 
الصفات التي نريد ان نوقها 


على التطبيق 


اول اسم الصيغة 
التی نرید ار 
اسم الصيغة التي سوف نستدعيه ن 
فيما بعد 


(.). 
كيف نستدعيه؟.. كل ما عليك ان تحدد باي وسم تريد ان يقع عليه ذلك التصميم او 
التاثير لنفرض انك تريد ان توقعه على العبارة التي جاءت بين وسمي ال <1ط> 
وکان التصميم الذي صممناه فوق الذي اسمیناه my-style‏ هو التطبيق او التأثير 

الذي نريد ان نوقه اذا كل ما عليك فعله کتابته کتالي -: 
<1ط/> سوف يطبق التأثير هنا < " eاsty-my‏ " = <h1 class‏ 


" اسم التصميم الذي صممته من غير النقطة التي ببدايته " = ووواع 
لاحظ ان الاستدعاء يجب ان يكون من داخل اي وسم تريد ... 


لناخذ مثالا كاملا .. 


<html> 
<head> <title> ريئاتلاl استدعاء‎ </tit[|e< 


<style type ="text/css'"> 


h2 { font-family: arial ; color: #c9ccf2 } 
p { font-size: 14pt ; color: #17982d } 
.red { color: #ff0000 ; font-size: 16pt } 
</style> 
</head> 


<body> 


<12/>سوف يظهر عليه التأثير الذي حدد لاي عنوان يوضع بين هذا الوسم<12> 

<br> 

<م/> سوف يظهر عليه التأثير الذي حدد لاي نص بين هذا الوسم <م> 

لن تظهر على هذا النص التأثيرات التي وضعت لاي نص يكتب بين < "مإ" = ويوا م> 
هذا الوسم بل سوف يظهر عليه تأثير التصميم الذي اسند للإسم 


red</p> 
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<body> 
</html> 


reo aml Eg ira‏ ۔ اگ عا اشاٹیہ ا 


Fe Eli iar Parade Feb lek 
۳| آ8 ا ار‎ i ل‎ ' Smear f wat f rah ft: r E" MH - ا‎ 


aî eI | FÎ FD aera 44l eiraiHETTE ea pirplee jikye-? hinl | Im mia * wen wma j] = 


وف پر ليطا انر الذي ن i‏ تس بین i‏ 1 ص 


أن تظهر علي ها الس التأئرات التي ضمت لآ لس يتب بين هذا الوسم بل سرف بظهر جيه تار 


اليم لذي سلت ال سے 2٤]‏ 1 


العفصرين ۷ال و «دمء واستخدامتهم في ال ٥اراء‏ :- 

هذان العنصران يستخدمان قبل ان نريد ان نحصر امر او نص او اي شيء بين 
وسمين غير وسوم ال ]1 المتعارف عليها فهنا يمكن ان نذكرهما كوسمين من 
وسوم ال 1سط اذا جاز التعبير ونستدعي ال ويهآ بداخلها اي يكتبان بهذه 
الصبغة 


<span class =""red”> oliص هنا سوف يتأثر النص بالتأثير الذي‎ </span> 


<۷زل/> هنا سوف يتأثر النص بالتأثير الذي صما <div class ='""'red”>‏ 


<style type ="text/cess'"> 
span { background-color: #ccffcc ; font-size: 18pt } 
<style> ات‎ 


</span>‏ هنا وضعنا تأآثيرات خاصة به ولیس استدعاء <موموی> 
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وكذلك الحال بالنسبة لل إل فكل ما يكتب لل مهمء يكتب لل بال وهذا الحديث 
يقودنا الى ان نذكر بعض الخصائص لهذين العنصرين وهي :- 
margin-top :.S5em "‏ :- 

ويمكن ان تأتي باكثر من شكل للاتجاهات اي ( صهااهط margin-‏ ۾ margin-‏ 
efا‏ و margin-right‏ ) وتقاس بالوحدة ٥ء‏ وهي وحدة دقيقة جدا اما ما هي 
تفي مقار المساد التي تات هد المامان. والإظار البحاطن بالتضن آي الحا 
المحاطة من الخارج (حسب الاتجاه المذكور بجانب ال margin‏ ( (یمکن ان 
نستعمل كل الاتجاهات) فعندما تكتب ال «إعإه. لوحدها بهذه الصيغة ( :ع2۲" 
"ه5.) يأخذ مسافة .5٥‏ من جميع الإتجاهات وسوف نوضح اكثر من خلال 
الشكل في الاسفل . 


-: padding-top :.S5em " 

وممكن ان تأتي باكثر من شكل للاتجاهات اي ( صه)tاهط-يمiللةم‏ و 
eftا-padding‏ و padding-right‏ ) اما ماذا نعني بها فهي المسافة الفاصلة 
لجانب من الجوانب او حتى جميع الجوانب (ممكن) الملاصفة للنص وتقاس بوحدة 
ال "٠ء‏ ايضا اي الهوامش حول النص وكلا بإتجاهه (يمكن ان نستعمل كل 
الاتجاهات) فعندما نكتب ال عم اللهم لوحدها بهذا الشكل ( صع5. padding:‏ ( 
سوف يأخذ مسافة .5٥‏ من جميع الاتجاهات وسوف نوضح اكثر من خلال الشكل 

فى الاسفل . 


أ1 margin‏ 
النص او الصورة او اي 3 boder‏ 


) ce ٤e۲ شيء اخر..(‎ 


padding 


float: left =‏ :- 
ويمکن ان تأتي على شکل اخر وهو اطعا : 1٥4٤‏ وهي تعني اچ التي سوف 
تكون بها مساحة الdiv‏ او Span‏ اي مساحتها كاملة اي بکل ما ڌ تحنويه . اعرف ان 
الامر صعب هنا قليلا في فهم المطلوب لكن لا تقلق فسوف نأخذ مثالا وسوف تفهم ما 
کتب كما یوجد عنصر ۲هء]ء ویأخذ نفس الاتجاهین ویکتب طعا : ھم1 او ]eft‏ 
وهذا يعني ان يعود على ما كان عليه لليمين او اليسار وهذه الصيغة الاخيرة غير 

مستخدمة إلا بشكل قليل اذا جاز التعبير ولكن ذكرتها هنا من باب العلم بالشيء. 
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ه ولنأتي الان لاهم شيء بالموضوع ما الفرق اذا بين ال رومءو ۷نل ؟ 
لا نريد ان ندخل بمتاهات الفرق بينهم لكي لا تختلط عليك الامور لكن نستطيع إذا 
جاز التعبير ان نقول الفرق هو ان ۷ال تعمل توقف (تنزل سطر وتعمل لها التأثير 
الخاص ( بالنسبة الى الاكواد التى سوف تأتی بعدها اما ال span‏ فتستمر .. کیف 
ذلك ؟ 1 ٤‏ 
لننظر الى هذا المثال السريع .. 
<style type =”text/css'"">‏ 
p { color :#ff0000 }‏ 


div {color: #0000ff 


التأثير </style>‏ 
حح "ا يقع على 
س ٠ ٠‏ 

في هذه الجملة سوف ينفذ عليها التأثير كما صممناه لهذا الوسم <م> 

سوف ينزل سطر في هذه الجملة ثم ينفذ عليها التأثير كما صممناه لهذا الوسم <۷إل> 

</div> 

في هذه الجملة سوف يطبق عليها التأثيرات (الخواص) التي صممناها لوسم ( م ) ولكن ضمن 

سطر جديد اي ان الجملة لن تأتي موصولة مع ما سبقها من الجملتين السابقتين اي ان كل 
جملة من الجمل سوف تكون في سطر . 


النتيجة سوف تظهر كتالي ... 


</p> 


في هذه الجملة سوف يوقع عليها التأثير كما صممناه لهذا الوسم 
سوف ينزل سطر في هذه الجملة ثم ينفذ عليها التأثير كما صممناه لهذا الوسم ثم ينزل سطر.. 


في هذه الجملة سوف يطبق عليها التأثيرات (الخواص) التي صممناها لوسم ( م ) 
ولكن ضمن سطر جديد اي ان الجملة لن تاتي موصولة مع ما سبقها من الجملتين 
السابقتين اي ان كل جملة من الجمل سوف تكون في سطر 


ملاحظة:- 

لاحظ ان جميع الجمل التي سبقت كانت ضمن وسم P‏ لكنها لم تأتي موصولة مع 
بعضها بل جاءت كل فقرة بمفردها اي ان وسم ال م طبق على الجملة الأولى تم 
اعترض منتصف الجملة وسم ال أل ليأخذ جزءا منها ويغلق وسمه (والوضع 
الطبيعي ان يكتب النص الذي ضمن وسم ال ۷ال في نفس السطر الذي سبقه اي 
المحتوي على وسم ال م وذلك لان وسم ال م لم يغلق بعد لكن ذلك لم يحصل بل ان 
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الجملة نزلت سطر وطبق التأثير الخاص بها ( اي لوسم ۷ال ) ثم نزل سطر . 
وطبعا كان هناك بقية للجملة لكن بعد غلق وسم ال و کت هه الا کن نے 
سطر جديد خاص بها بدلا من ان تأتي ضمن نفس السطرين الذين سبقاها ثم اغلق 


وسم ال م .. 
ama‏ 


<style type =”text/css'"'> 
Pp f color :#ffO0000 } 


span {color: #0000ff } 


یقع على 


في هذه الجملة سوف ينفذ عليها التأثير كما صممناه لهذا الوسم <م> 

<span> ئ هذه الجملة سوف ينفذ عليها التأثير کما صممناہ لهذا الوسم‎ </span> 

في هذه الجملة سوف ينفذ عليها التأثير كما صممناه لوسم ( م ) .. ولكن ضمن نفس السطر 
اي ان هذه الجملة سوف تأتي ضمن نفس السطر للجملتين اللتين سبقتها . 


</style> 


</p> 


النتيجة :- 

في هذه الجملة سوف ينفذ عليها التأثير كما صممناه لهذا الوسم في هذه الجملة سوف 
ينفذ عليها التأثير كما صممناه لهذا الوسم في هذه الجملة سوف ينفذ عليها التأثير كما 
صممناه لوسم ( م ) .. ولكن ضمن نفس السطر اي ان هذه الجملة سوف تأتي ضمن 
نفس السطر للجملتين اللتين سبقتها 

ملاحظة _. 


ااا 9 1 الا ختلاه بین النتب جير السابقتين الخاصة ب div‏ والنتيجة هذه... فهنا 


لناخذ مثالا سريعا اخر .. 
<م/>انترنت <ہھومو/>انترنت c10: #f0000”<‏ ”= eاsty‏ span>انترنت<pمٍ>‏ 
النتيجة :- 
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<م/> انترنت <۷ال/> انترنت <”#۴0000 :o۲اco‏ ”= مارtء >div‏ انترنت <م> 


لعلك لاحظت الفرق بشكل اوضح ... 
لنأخذ امثله کامله لکل من مء و ۷ز :- ( بشکل عام ) 


<html dir="rtl'"'> 
<head> 
<title>div</title> 


<style type = "text/css'"'> 


div { background-color: #ffccff; 
margin-bottom: .Sem } 
</style> 


</head> 
<body> 


اي سوف تأخذ هذه الجملة ۰ من حجم الصفحة<'"'10% <div style = "width:‏ 
</div>‏ 


<div style = "width: 30%; text-align: center'"'> 

هنا سوف يجعل النص بالمنتصف بحيث يأخذ مساحة مقدارها %٠١‏ من حجم الشاشة 
فإذا زاد عن ذلك امتداد النص فسوف ينزل سطر مباشرة لان المساحة المخصصة له هي "٠‏ 
<۷ذك/>% من حجم الشاشة 


<div style = "width: 20%; height: 30%; overflow: scroll'""> 
©١ هنا في هذه الجملة حددت ان تكون المساحة من حيث الارتفاع و العرض بمقدار‎ 
حجم الشاشة مع ظهور البار‎ نم>/dلآ۷<‎ 


</body> 


</html> 
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Farad bh Hek 
ا ۴ 1 ا‎ 1 Search ly mert Û iad f 3 


14 | E Wanarla aA Rimi NETTIE RHI 


خلا دزف إو لصي زال الت وق 

بلقا دآع گار ما ٠١‏ حن سم 3.3131 192 

راد عن 3لت اتا N‏ عط 

PT > الیایا بے لا ا‎ 5 E 
سل س اقا‎ 


َ 


طا لې اہ البلا دك 
ان رن انا نن میٹ 
ان أ و المرطن يشار 


اتلم عو الال م اك 


أنحلل هذا المثال سويا .. 

اعتقد لا يوجد جديد لك اخي المتدرب فكل شيء واضح لديك لكن اعتقد انه شد 
انتباهك امرين اولهما هو كيف اصمم ال ماراء لل ل في رأس الصفحة تم اصمم 
ايضا م[رء لل آل داخل وسم ال ۷ في جسم الصفحة اخي المتدرب انا قلت لآك 
سابقا ان لكلا منا طريقته في كتابة الكود فانا كتبت جزءا من التصميم في رأس 
SR SCANS oS 1 E‏ 
اريد ان اوصل لك معلومة وهي انه يمكن ان نجمع الطريقتين في صفحة واحدة فنحن 
تعلمنا الطريفتين لان کلت ار ر ا انت انزعجت من ذلك فلا 
غلك اأعر ان الكرد الموجرد داخل وسم #إل غين موجرة ها واكته انت فرق 
بجانب الاول الموجود في رأس الصفحة سوف يعطي نفس الناتج لا عليك ففي 
الحالتين سوف تطبق التأثيرات جميعها مهما كانت الطريقة ففي النهاية يجمعها 
ويضعها جميعها . 

اما الامر الثاني الذي شد انتباهك فهو وجود هذا الکود ]01ای over ؟اo0 Ww:‏ نعم 
اخي المتدرب فهذه صيغة جديدة عليك اذا اضفها الى معلوماتك فإذا اردت ان تضع 
لمساحة ال آل او الى span‏ - ( اscro1‏ ) فما عليك إلا كتابة هذه الصيغة فقط 


واتوقع انها واضحة من اسمها . 
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ملاحظة. 

اخي المتدرب لا تنزعج من عدم ذكري الصيغة السابقة لك سابقا فانا لا اريد ان اثقل 
عليك بكثرة الحفظ فانا اعلم انا هذا ممل لكن لكل شيء وقته هكذا تفهم الصيغة 
فتحفظها افضل من انك تحفظها فقط .. 


مثالا اخر على ال 1v‏ وال مهمء واعتبره امتحان لك فتحليله متروكا لك .... 


<html dir="rt]'"> 
<head> 
<title>div & span</title> 


<style type = "text/css'"'> 


div { background-color: #efefef; 
margin-bottom: .Sem; 
font-size: 1.5em; 
width: 50%0 } 


p { text-align: justify; color:#ff0000 } 
</style> 
</head> 
<body> 


<div style = "text-align: center'"'> 
/>المطورون العرب‎ 1۷< 


<div style = "float: left; margin: .Sem; 
text-align: right"> 


<۷ل/>انت الوحيد الذي يستطيع ان يحدد هل تستطيع ان تبدع ام لا وليس غيرك 


<p> 
لكلا منا طموحه وهواياته وقدرته فأخي المتدرب نک شع کی او کن و ا د‎ 
الانترنت والعاملين على تقدمه فلا تتردد في ذلك فنحن هنا لنساعدك على نيل ما تتمناه فأي‎ 
تقدم عربي نصل له يكون مكسبه مكسب أمة بأكملها‎ 

</p> 


<div style = "float: right; padding: .Sem; 
text-align: right"> 
<۷ذل/>تصميم وتطوير مواقع الإنترنت‎ 
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<p> 
" هنا سوف تتعلم اخي المتدرب على كيفية إضافة السحر والجمال والرونق لصفحاتك‎ 
فكل ما عليك هو قليلا من الصير وقليلا من التفكير والابداع بعد التعلم ولقد ذكرت الصبر قبل‎ 
كل شيء فهو مفتاح الوصول للتميز والابداع‎ 
<span style = "float: left'"> welcome to cascading style sheets 
</span></p> 


</body> 
</html> 


i iîriË ıpyon = Heeoaedt iu naî ap lerar 
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المطرر ون العرب 


لق ملا رة م فرامالة ررك فاضي ماري آلا قلت pr‏ ای اف ال الذي EE‏ ان فل 
س سلب ج 


اټ کوت من مرن اي ا تقرته ر العا ایی ل ت لب تار ند ل 
لے قلت ھا الما لے قیں ہا گناہ لای شم می قسف لد لل اتید 1 و ليمز فيز لله 


قر ن فسا ضا ا وات یا 


0 ھا در تک تتم ال اسر بب ل عب اقا ل ,تيال ,ولق 
اتنام وتطرير موا اښ لتر نتا a‏ ق ما ا اا سن لسن وكليد من لے و الت u; pl‏ 1 
قط ر قد ار تسر ايل کل ىء س تلام لرسوال التو والداج 


ari Dri i cu acalkny style ilê 


الان بقي لدينا اخر معلومة هي التأثيرات ( الخصائص ) الواقعة او المطبقة على 
الإطارات (eلإ0ط)‏ : 
ولا استطيع ان اصفها لك فانت بمجرد ان تنظر الى المثال المصور سوف تعرف 
شكل كل واحدة منها فهي شكلية اي شکل من اشکال سمك الإطار (border)‏ او 
الصيغ العامة لها :- 
border-width : "‏ واشکكالە :- 

border-wı1dth : thick o 

border-wı1dth : medium o 

border-wı1dth : thin o 
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" : eاsty-border‏ وأشكالھا :- 

border-style : groove o 
border-style : inset 
border-style : outset 
border-style : ridge 
border-style : solid 

border-style :double o 
border-color: " 

وتضع بجانبه اي لون تريده لنفرض اللون الاسود اذا تكتب بهذا الشكل -إءلإ0ط 
0 :1ه وهذا اقصد به لون الإطار الذي اريده... 
لنأخذ مثلا كاملا وسوف اجمع به عدة افكار تطرقنا لها سابقا وليكن هذا المثال 
مراجعة لنا عما تطرقنا له في السابق :- 
ملاحظة : 
سوف اجعل مثالنا هذا قائم على الإستدعاء اي ا class‏ فهي طريقة جيدة لتنظيم 
افكارنا وخصوصا للإطارات وتنوع افكارنا وتصميماتنا لها ... 


O 0 © o 


<html > 
<head> 
<title>borders</title> 
<style type = "text/css""> 
body { background-color: #ccffcc } 
div { text-align: center; 
margin-bottom: 1em; 
padding: .Sem } 
„thick { border-width: thick } 
.medium { border-width: medium } 
„thin { border-width: thin } 


„groove { border-style: groove } 


.inset { border-style: inset } 
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.outset { border-style: outset } 
.orange { border-color: orange } 
.black { border-color: black } 


</style> 
</head> 


<body> 


<div class = "thick groove">This text has a border</div> 
<div class = "medium groove">This text has a border</div> 
<div class = "thin groove">This text has a border</div> 


<p class = "thin orange inset">A thin orange line...</p> 
<p class = "medium black outset''> 
And a thicker black line</p> 


</body> 
</html> 


i boarders » JEersulî Internat Ergin 
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-: ءارا٥ اذا بقي علينا اخر طريقة يمكن ان يكتب بها ال‎ ٥ 

هنا طبق كل ما ذكرناه سابقا لكن الفكرة الجديدة هنا لنفرض انك لا تريد ان تكتب 
تصميمك لل ء[راء (اي كود الم ]1راء) في نفس صفحتك اي لا تريد ان تكتب الكود 
الخاص بال عاراء في صفحة ال 1)1 بر س الصفحة بين وسمي ال ---<ل2ع1h>‏ 
٥0<‏ ٠إ/>---‏ ولا بداخل جسم الصفحة في داخل الوسم المطلوب تطبيق التاثير عليه 
واھ -------ه ]راء م> اي انك تريد لها صفحة خاصة اي فقط تحتوي على 
كود ال مء راء اذا كل الذي عليك هو تصميمها وتخزينها بإمتداد ( وو) .. 


لکن اکتب کود ال ع]ر)ء من غير ان یکون محصور بین وسمي ال مارا وهما: 
<style type ="text/css”>‏ 


</style> 
.. فقط اكتب الكود وسوف نأخذ مثالا بعد قليل لنوضح اكثر‎ 


= الشي الثاني يجب ان تكتب هذا الكود فوق في رأس صفحة ال 1ط اي بین 
وسمي ال he4)‏ هكذا ( وهذا كود إستدعاء ملف ال style‏ الذي انشأناه بامتداد 


.. ( CSS 
<head> 


>/ ""'css.اسم‏ lئمأف <link rel =”stylesheet" type =""text/css'"" hreaf=”‏ 
</head>‏ 
اسم الملف تضعه لو كان في نفس الملف الذي يوجد به صفحات 1ط او صفحاتك 
المصممة بأي لغة اما لو كان غير ذلك اي في ملف اخر فانك تضع امتداده الصحيح 
کما ذدکرنا في اول الكتاب كيفية استدعاء الصور (---= SC‏ )... 
مثالا کاملاء 


P f color: #ff0000 } 
Em { color: #ffffff ; background-color: #000000 } 
.key1 {color: #000000 } 


نفرض ان هذا تصميمنا لملف ال ء1ر)ء وبعد ان كتبناه حفظناه بامتداد ( ءوء) لنفرض أننا 
سميناه ووع.٥اراور.‏ وعلى فرض اننا حفظناه في نفس الملف الذي سوف توجد به صفحتنا 
التي سوف نصممها بال 1١ط‏ او اي لغة اخرى ... 

ملاحظة : لاحظ ان كتابتي لكود ال ء1ر)ء لم احصرهما بين وسمين ال ماراء 
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٥ہ‏ تصمیم صفحة ال اہراط :- 
<html dir='""'rt]'"'>‏ 
<ع[٤1)/>سلسله‏ كتب تقنيات الانترنت <ع][))> >head><‏ 


<link rel ="stylesheet" type ="text/css" href =" mystyle.css'"" /> 
</head> 

<body> 

<م/>سلسلة كتب تقنيات الانترنت سوف تحتوي على كل ما يرجوه المطور العربي <م> 


>ٍpم‎ ءاھء='"'kمر1''< <م/>مع تحيات المطورون‎ 
<p> <em> MST</em> </p> 


</body> 
</html> 
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La‏ قتي ياتا الإر لتا دىهد تئرج خن کل دا فو جرء لنشرر آلز ی 
د کرات زرو 
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